// 车型信息概要
<template>

<div class="car-info-outline" :style='{minWith: `${tableW}px`}'>
    <c-block-header :title='"车型概要"'></c-block-header>
    <div class="table-box" >
        <Table class='outline' @scroll.stop.prevent='() =>{}' :height='tableH' :show-header='false' :columns='title' :data='cData' @on-current-change='select' highlight-row></Table>
    </div>
</div>

</template>

<script lang='ts'>
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
import carSummary from '../car_summary/index.vue'

@Component({})
export default class carInfoOutline extends Vue{
    name:string = 'car-info-out-line'

    @Prop()
    data:carModel[]

    get cData (){

        let cache = []
        this.data.forEach((item, index) =>{
            cache.push({
                ...item,
                index,
            });
        })

        return cache
    }

    // 表格宽度
   get tableW():number{
        let w = 2;

        this.title.forEach(item =>{
            w += item.width || 80;
        })

        return w + 200;
    }
    
    get tableH():number| '' {
        
        let h = this.data.length * 72;
        let maxH = 240;
        
        return  h > maxH ? maxH : ''
    }

    title = [

        {
            title: '车型描述',
            ellipsis:true,
            key: 'vehicleName',
            render (h, {row, column, index}){
                
                return h(carSummary, {
                    props: {
                       data: row
                    },
                })
                
            }
        },
        // {
        //     title: '车身价',
        //     width: 80,
        //     render (h, {row, column, index}){

        //         return h('span', {}, [
        //             `${row.price/10000}万` 
        //         ])
        //     },
        //     key: 'price'
        // },
        // {
        //     title: '排量',
        //     width: 80,
        //     render (h, {row, column, index}){

        //         return h('span', {}, [

        //             `${row.engineCapability}L`
                    
        //         ])
                
        //     },
        //     key: 'engineCapability'
        // },
        // {
        //     title: '载重',
        //     width: 80,
        //     type: 'expand',
        //     render (h, {row, column, index}){
        //         return h('span', {}, [
        //             `${row.tonnages/1000}吨`
        //         ]);

        //     },
        //     key: 'tonnages'
        // },
        // {
        //     title: '座位',
        //     type: 'expand',
        //     width: 60,
        //     key: 'seats'
        // },
        {
            title: '详情',
            width: 60,
            key: 'more',
            
            render: (h, {row, column, index}) =>{
                let vue = this;

                return h('i', {

                    attrs: {
                        class: 'iconfont icon-more-transverse'
                    },
                    
                    props: {
                        type: 'text primary',
                        icon: 'icon icon-more-transverse' 
                    },
                    
                    on:{
                        click (){
                            vue.select(row)
                        },
                          
                    }
                    
                })        
                
            }
            
        }
        
    ]

    // 上传选择车型
    select (currentRow, oldCurrentRow?){
        this.$emit('select', currentRow)
    }

   
    
} 


</script>

<style lang='scss'>


.car-info-outline{

}

.table-box{
   
}

// 表格边框
.outline.ivu-table-wrapper{
    border: none;

    .ivu-table-row-highlight div{
        color: $font_light_color;
    }

    
    div.ivu-table::after{
        content: '';
        display: none;
    }

}


</style>